CSS Fonts(字體) 屬性
用於定義字體系列、大小、粗細 和文字樣式(ex:斜體)
1.字體系列
font-family 屬性定義文本的字體系列
<style>
body{
font-family: Georgia, 'Times New Roman', Times, serif;
}
</style>
備註 :
- 各種字體之間必須使用逗號隔開
- 一般情況下 如果有空格隔開多個單詞組成的字體,加上"單引號"
- 盡量使用系統自帶默認字體
- 最常見的幾個字體: body{font-family:'Microsoft YaHei' ,tahoma , arial;}
- 一般直接修改body標籤,若有多字體將會照順序去選取
2.字體大小
font-size屬性定義字體大小
p{
font-size: 20px;
}
備註 :
- px(像素)大小是我們網頁的最常用單位
- google chrome 默認文字大小為16px
- 不同瀏覽器默認大小不一,盡量給明確大小
- 可以給body指定整個頁面大小
- 標題標籤較特殊 需要單獨指定文字大小
3.字體粗細
font-weight屬性定義字體粗細
p{
font-weight: bold;
}
備註 :
- 可讓粗標籤(比如h&stong等)不加粗,或者其他標籤加粗
- 實際開發時,更常用數字表示粗細
- normal為默認值 bold粗體為700,用數字表示400=normal 700等同於bold
4.文字樣式
font-style 屬性設置文字風格
p{
font-style: normal;
}
備註 :
- normal為默認值
- ltalic為斜體
- 平時反而很少給文字加斜體,反而較常把斜體標籤(em , i)改為不傾斜
5.font複合屬性
body{
/* font: font-style font-weight font-size- font-family */
font: italic 700 16px Impact;
}
- 使用font屬性時,必須按照語法格式的順序書寫,不能更換順序,並且每個屬性間用空格隔開
- 不需要設置的屬性可以省略(將取默認值),但必須保留font-size和font-family屬性,否則font屬性將不起作用
字體屬性範例